<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>teleport</title>
    <script src='./vue.global.js'></script>
</head>
<body class="root">
    <div id='app'>
        <!-- mmodal:模态框（页面对话框） -->
        <!-- 点击子组件跳出模态框 -->
        <modal-button></modal-button>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {}
            },
            methods:{},
            computed:{}
        })

        /* 定义模态框按钮组件 */
        app.component("modal-button",{
            data(){
                return {
                    // 定义要不要显示模态框
                    modalOpen:false
                }
            },
            template:`
            <button @click="modalOpen=true">弹窗</button>

            <!-- 将模态框直接送到body的顶层去渲染 to对应一个DOM选择器 -->
            <teleport to='.root'>
                <div v-if="modalOpen" class="modal">
                    <h3>重磅消息</h3>
                    <p>你老婆个人跑了</p>
                    <button @click="modalOpen=false">X</button>
                </div>
            </teleport>
            `
        })

        app.mount('#app')
    </script>
</body>
</html>